<template>
  <el-card>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-input placeholder="用户名" v-model="searchWord"></el-input>
      </el-col>
      <el-col :span="12">
        <el-button type="primary" class="el-icon-search">查询</el-button>
        <el-button>清空</el-button>
      </el-col>
    </el-row>
    <div style="margin: 20px 0">
      <el-button type="primary" @click="setUserOrRole('user')">添加</el-button>
      <el-button type="danger">批量删除</el-button>
    </div>
    <!-- @selection-change="handleSelectionChange" -->
    <el-table ref="multipleTable" tooltip-effect="dark" :data="userList" style="width: 100%; margin-bottom: 20px;" border
      v-loading="loading">
      <el-table-column type="selection" width="80">
      </el-table-column>
      <el-table-column type="index" label="序号" width="80">
      </el-table-column>
      <el-table-column label="用户名" width="160" prop="username">
      </el-table-column>
      <el-table-column prop="nickName" label="角色名称">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="light" content="分配角色" placement="top">
            <el-button type="primary" class="el-icon-user" size="mini"
              @click="setUserOrRole('role', scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="修改用户信息" placement="top">
            <el-button type="primary" class="el-icon-edit" size="mini"
              @click="setUserOrRole('user', scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="删除用户" placement="top">
            <el-button type="danger" class="el-icon-delete" size="mini"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageInfo.page"
      :page-sizes="[3, 5, 8]" :page-size="pageInfo.limit" layout="prev, pager, next, jumper, ->, total, sizes"
      :total="total">
    </el-pagination>
  </el-card>
</template>

<script>
export default {
  name: 'Role',
  data: () => ({
    userList: [],
    total: 0,
    pageInfo: {
      page: 1,
      limit: 8
    },
    loading: false,
    searchWord: '',
    // 保存被选中的角色的id
    selectUserIdList: [],
  }),
  methods: {
    handleSizeChange (val){

    },
    handleCurrentChange (val){

    }
  }
}
</script>

<style scoped></style>

